<template>
  <view class="sort-container">
    <view class="sort-box">
      <view class="sort_item" @click="toConcert(index)" v-for="(item,index) in sortList" :key="index">
        <image :src="item.icon" class="imagerUrl"/>
        <text class="text">{{ item.name }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import store from "../../../../store";

export default {
  data() {
    return {
      sortList: [
        {
          id: 0,
          name: '演唱会',
          icon: '../../../../static/icons/1.png'
        },
        {
          id: 1,
          name: '话剧歌剧',
          icon: '../../../../static/icons/2.png'
        },
        {
          id: 2,
          name: 'Liveouse',
          icon: '../../../../static/icons/3.png'
        },
        {
          id: 3,
          name: '音乐会',
          icon: '../../../../static/icons/7.png'
        },
        {
          id: 4,
          name: '展览市集',
          icon: '../../../../static/icons/8.png'
        },
        {
          id: 5,
          name: '舞蹈芭蕾',
          icon: '../../../../static/icons/6.png'
        },
        {
          id: 6,
          name: '儿童亲子',
          icon: '../../../../static/icons/4.png'
        },
        {
          id: 7,
          name: '曲艺杂谈',
          icon: '../../../../static/icons/5.png'
        }
      ]
    };
  },
  methods: {
    toConcert(idx) {
      store.commit("changeTakeType", idx);
      uni.switchTab({
        url: `/pages/concert/concert`
      });
    }
  }
}
</script>

<style lang="scss">
.sort-container {
  margin-top: 25px;
  width: 100%;
  height: 190px;

  .sort-box {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: 100%;
    margin: 0 auto;

    .sort_item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      width: 25%;
      height: 135rpx;

      .imagerUrl {
        width: 36px;
        height: 36px;
      }

      .text {
        font-size: 12px;
      }
    }
  }
}
</style>
